<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变更项目栏</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul {
            width: 280px;
            margin: 30px auto 0px;
            display: flex;
            border-bottom: solid 2px rgb(196, 194, 194);
            list-style: none;
            box-sizing: border-box;
        }
        
        li {
            width: 70px;
            text-align: center;
            font-size: 18px;
            color: rgb(125, 163, 247);
            box-sizing: border-box;
            cursor: pointer;
        }
        
        .red {
            border-bottom: rgb(236, 95, 95) 2px solid;
            color: rgb(236, 95, 95);
        }
        
        .pic {
            width: 280px;
            height: 497px;
            margin: auto;
            border-radius: 15px;
            position: relative;
            margin-top: 15px;
            overflow: hidden;
        }
        
        .pic img {
            width: 280px;
            position: absolute;
        }
    </style>
</head>

<body>
    <ul>
        <li class="red">宠物</li>
        <li>风景</li>
        <li>黄昏</li>
        <li>夜景</li>
    </ul>
    <div class="pic">
        <img src="./images/宠物.jpg" alt="">
        <!-- <img src="./images/风景.jpg" alt="">
        <img src="./images/黄昏.jpg" alt="">
        <img src="./images/夜景.jpg" alt=""> -->
    </div>


    <script>
        //获取相关节点
        let li = document.getElementsByTagName("li");
        let img = document.getElementsByTagName("img")[0];
        let arr = ["images/宠物.jpg", "images/风景.jpg", "images/黄昏.jpg", "images/夜景.jpg"];
        for (let i = 0; i < li.length; i++) {
            li[i].addEventListener("click", function() {
                for (let j = 0; j < li.length; j++) {
                    li[j].className = ""
                }
                li[i].className = "red"
                img.src = `./${arr[i]}`;

            }, false)
        }
    </script>
</body>

</html>